<template>
    <div style="background: #fff;min-height: 100vh;">
        <div style="background-color: #FF2E67;height: 105px;">
            <img @click="returnBcak" style="width: 10px;top:10px;left:10px;position: absolute;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
            <div style="padding:10px 0px;margin-left:-26px">
                <span style="margin-left:50%;color: #fff;font-size: 16px;opacity:.8;">京东</span>
            </div>
            <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;padding:20px 10px;">
                <li style="display: inline-block;margin-right:20px;text-align: center;color:#fff;font-size: 16px;" @click="selIndexList">
                    <div>
                      <div :style="activeNum == -1?'':'opacity: .6'">精选</div>
                      <div v-if="activeNum == -1" style="border:1px solid #fff;width:32px;margin-top:5px;"></div>
                    </div>
                </li>
                <li v-for="(val,index) in listJing" @click="selList(val,index)" style="display: inline-block;margin-right:20px;text-align: center;color:#fff;font-size: 16px;">
                    <div>
                      <div :style="activeNum == index?'':'opacity: .6'">{{val.name}}</div>
                      <!-- <div style="border:1px solid #fff;width:36px;margin-left: 5px;margin-top:5px;"></div> -->
                      <div v-if="activeNum == index && val.name.length == 2" style="border:1px solid #fff;width:32px;margin-top:5px;"></div>
                      <div v-if="activeNum == index && val.name.length == 4" style="border:1px solid #fff;width:64px;margin-top:5px;"></div>
                    </div>
                </li>
            </ul>     
        </div>
        <div style="padding:10px;background: #ededed;">
            <productList @proId="getProId" @numId="getNumId" :dataList="objVla" :urlPathVal="indexUrl"></productList>
        </div>
        <div v-if="creatShareShow" style="position: fixed;top:0;z-index: 1000;width: 100%;">
            <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
        </div>
    </div>
  </template>
  
  <script>
      import productList from './public/productList.vue';
      import creatShare from './creatShare.vue';
  export default {
    name: 'jingdongListPage',
    data () {
      return {
        listJing:[],
        activeNum:-1,
        indexUrl:'jingdong',
        objVla:{jingdongVal:222},
        numId:'',
        proId:'',
        creatShareShow:false
      }
    },
    components: {  
        productList,
        creatShare
    },
    
    mounted() {     
        this.userId = localStorage.getItem('user_id');   
        this.initData();
    },
    methods: {
        returnCurrentPage(data){
            this.creatShareShow = data;
        },
        selList(val,index){
            this.activeNum = index;
            this.objVla = val;
        },
        initData(){
            this.$http.post(this.utils.config+"/netmall/app/jd/api/getGoodsCatgorys").then((data) => {
                this.listJing=data.data.result;
            })
        },
        selIndexList(){
            this.activeNum = -1;
            this.objVla = {jingdongVal:222};
        },
        getProId(data){
            this.proId = data;
        },
        getNumId(data){
            this.numId = data;
            this.creatShareShow = true;
        },
        jumpSearch(){
            this.$router.push('/searchPage');
        },
        returnBcak(){
            this.$router.push('/');
        },
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .iptSty{
          height: 40px;
          line-height: 40px;
          padding-left:40px;
          background-color: #fff;
          border-radius: 20px;
          width:100%;
          border:none;
          box-sizing: border-box;
      }
      input::placeholder{
          color: #888;
          font-weight: 400;
      }
      .btn1{
          position: absolute;
          right:10px;
          top:0;
          background-color: #FFE842;
          border-radius: 20px;
          font-size: 14px;
          color:#B34C00;
          border:none;
          padding:0 22px;
          height: 40px;
          line-height: 40px;
      }
      .elementSty::-webkit-scrollbar {display:none}
  </style>
  